<script setup>
import * as echarts from 'echarts/core'
import { GridComponent,TooltipComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { ref,onMounted,onUnmounted } from 'vue'
echarts.use([GridComponent, BarChart, CanvasRenderer,TooltipComponent])//注册必须的组件和渲染器
const chartRef = ref(null)
const getMap = () => {//获取柱状图
  const myColor = ["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6"];
  const myChart = echarts.init(chartRef.value,null,{
    renderer:'canvas',
    useDirtyRect:false
  });
  const option = {
  grid: {
      left:"22%",
      top:"10%",
      bottom: "10%",
      //containLabel: true
  },
  xAxis: {
    show:false
  },
  yAxis: [
    {
      type: 'category',
      inverse:true,
      data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
      axisLine:{
        show:false
      },
      axisTick:{
        show:false
      },
      axisLabel:{
        color:"#fff",
        fontSize:8
      }
    },
    {
      type: 'category',
      data: [702, 350, 610, 793, 664],
      inverse:true,
      axisLine:{
        show:false
      },
      axisTick:{
        show:false
      },
      axisLabel:{
        color:"#fff",
        fontSize:8
      }
    }
  ],
  series: [
    {
      name: '条',
      type: 'bar',
      data: [70,34,60,78,69],
      yAxisIndex:0,
      itemStyle:{
        barBorderRadius:20,
        color:function(params){
          return myColor[params.dataIndex];
        }
      },
      barCategoryGap:50,//柱子间的距离
      barWidth:10,//柱子间的宽度
      label:{
        show:true,
        position:'inside',
        fontmatter:"{c}%"//这个{c}%会自动解析为data中的数据
      }
    },
    {
      name: "框",
      type: "bar",
      barCategoryGap: 50,
      barWidth: 15,
      yAxisIndex:1,
      itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 2,
          barBorderRadius: 15
      },
      data: [100,100,100,100,100],
    }
  ]
};
  myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
}
onMounted(async()=>{
  await getMap()
})
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize); // 移除事件监听
    myChart.dispose(); // 销毁图表实例
    myChart = null; // 释放引用
  }
});
</script>
<template>
<div class="bartu" ref="chartRef">

</div>
</template>
<style scoped lang="less">
.bartu{
  height:240px;
}
</style>